<template>
  <div style="height:100vh;overflow:hidden;background-image:linear-gradient(135deg,#1352f2,#3c82f5);">
    <el-container style="padding:30px;">
      <el-header>
        <el-row>
          <el-col :span="3">
            <img src="/imgs/login/logo.png" style="height: 50px;">
          </el-col>
          <el-col :span="1">
            <img src="/imgs/login/auto.png" style="height: 50px;">
          </el-col>
          <el-col :span="1">
            <img src="/imgs/login/verticalLine.png" style="height: 50px;">
          </el-col>
          <el-col :span="19">
            <span style="color:#fff;font-size:30px;font-weight:bold;">工程师上门服务系统</span>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="16">
            <img src="/imgs/login/bg.png" style="width:100%;margin-top: 60px;">
          </el-col>
          <el-col :span="8">
            <el-card style="margin-top: 80px;">
              <h3 style="text-align: center;">用户注册</h3>
              <el-form label-position="top">
                <el-form-item label="用户类型">
                  <el-radio-group v-model="userType">
                    <el-radio label="user">普通用户</el-radio>
                    <el-radio label="engineer">工程师</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input placeholder="请输入手机号" v-model="registerForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                  <el-input placeholder="请输入用户名" v-model="registerForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input placeholder="请输入密码" show-password v-model="registerForm.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                  <el-input placeholder="请再次输入密码" show-password v-model="registerForm.confirmPassword"></el-input>
                </el-form-item>
                <template v-if="userType === 'user'">
                  <el-form-item label="头像上传">
                    <el-upload action="#" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                      <el-button type="primary">选择头像</el-button>
                    </el-upload>
                  </el-form-item>
                </template>
                <template v-if="userType === 'engineer'">
                  <el-form-item label="资质证书上传">
                    <el-upload action="#" :show-file-list="false" :on-success="handleCertificateSuccess" :before-upload="beforeCertificateUpload">
                      <el-button type="primary">选择资质证书</el-button>
                    </el-upload>
                  </el-form-item>
                </template>
                <el-form-item>
                  <el-button type="primary" style="width:100%;" @click="register">注册</el-button>
                </el-form-item>
              </el-form>
              <div style="text-align: center;">
                <el-button type="text" @click="goToLogin">已有账号？立即登录</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();

const registerForm = ref({
  phone: '',
  username: '',
  password: '',
  confirmPassword: '',
  avatar: '',
  certificate: '',
});

const userType = ref('user');

const register = () => {
  if (!registerForm.value.phone || !registerForm.value.username || !registerForm.value.password || !registerForm.value.confirmPassword) {
    ElMessage.error('请填写完整的注册信息');
    return;
  }

  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    ElMessage.error('两次输入的密码不一致');
    return;
  }

  const registerData = {
    ...registerForm.value,
    userType: userType.value,
  };

  axios.post(BASE_URL + '/v1/user/register', registerData)
      .then((response) => {
        if (response.data.code === 2000) {
          ElMessage.success('注册成功！');
          router.push('/login');
        } else {
          ElMessage.error(response.data.msg);
        }
      })
      .catch((error) => {
        ElMessage.error('注册失败，请稍后重试');
        console.error(error);
      });
};

const goToLogin = () => {
  router.push('/login');
};

const handleAvatarSuccess = (response) => {
  registerForm.value.avatar = response.url;
  ElMessage.success('头像上传成功');
};

const handleCertificateSuccess = (response) => {
  registerForm.value.certificate = response.url;
  ElMessage.success('资质证书上传成功');
};

const beforeAvatarUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    ElMessage.error('只能上传 JPG/PNG 格式的图片');
  }
  return isJpgOrPng;
};

const beforeCertificateUpload = (file) => {
  const isPdf = file.type === 'application/pdf';
  if (!isPdf) {
    ElMessage.error('只能上传 PDF 格式的文件');
  }
  return isPdf;
};
</script>

<style scoped>
</style>